import { CART_LIST, CHECK_ALL, UNCHECK_ALL, CHECK_ITEM } from './mutations-types.js'
import { Toast, Dialog } from 'vant';
//引入axios的二次封装
import http from '@/common/api/request.js'

export default {
    state: {
        list: [], //购物车数据
        selectList: [] //选中的数据
    },
    getters: {
        //判断什么时候执行全选/反选
        isCheckedAll(state) {
            return state.list.length == state.selectList.length
        },
        //价格数量总计
        total(state) {
            let total = {
                    num: 0,
                    price: 0
                }
                //遍历购物车数据
            state.list.forEach(v => {
                //只加用户选中的数据
                if (v.checked) {
                    // 如果手动修改输入框至0以下的数则返回
                    if (v.goods_num <= 0) return
                    total.num += parseInt(v.goods_num)
                    total.price += parseFloat(v.goods_price * v.goods_num)
                }

            })
            return total
        },
        //在购物车选中的商品
        goodsChecked(state) {
            return state.list.filter(v => {
                return v.checked
            })
        }
    },
    mutations: {
        //给vuex的state中的list传值 以便渲染
        [CART_LIST](state, cartArr) {
            state.list = cartArr
                //记住要给selectList写入初始数据，不然一打开界面selectList没有数据就不会全选
                // cartArr.forEach(v => {
                //     state.selectList.push(v.id)
                // })
            state.selectList = cartArr.map(v => {
                return v.id
            })



        },
        //购物车全选(令购物车中选中状态为true，并且把list中每一项的ID都赋值给selectList)
        [CHECK_ALL](state) {
            state.selectList = state.list.map(v => {
                v.checked = true
                return v.id
            })
        },
        //购物车反选(令购物车的checked每一项都为false，并且清空选中的数据)
        [UNCHECK_ALL](state) {
            state.list.forEach(v => {
                v.checked = false
            })
            state.selectList = []
        },
        //单选
        [CHECK_ITEM](state, index) {
            // console.log(state.list[index].id, state.selectList)
            //用户点击的商品对应id
            let id = state.list[index].id
                //根据用户点击的商品对应的id寻找 并返回索引值
            let i = state.selectList.indexOf(id)
                //能在selectList找到对应id，就删除
            if (i > -1) {
                return state.selectList.splice(i, 1)
            } else {
                //如果之前没选中 给selectList添加id进去
                return state.selectList.push(id)
            }
        },
        //删除vuex数据(多选)
        delGoods(state) {
            state.list = state.list.filter(v => {
                return state.selectList.indexOf(v.id) == -1
            })
        }
    },
    //在action中进行判断以及提交mutations的方法
    //如果判断的用户购物车的数据和选中的数据相同（此时为全选状态）则提交反选的方法
    //如果判断的用户购物车的数据和选中的数据不相同（此时不是全选）则提交全选的方法
    actions: {
        //进行全选/反选操作
        CheckedAllFn({ commit, getters }) {
            getters.isCheckedAll ? commit('unCheckAll') : commit('checkAll')
        },
        //删除
        delGoodsFn({ state, commit }, id) {
            // 如果没有选中，提示信息
            if (state.selectList.length == 0) {
                Toast('请选择商品')
            } else {
                // 如果有选中 弹出是否确认删除
                Dialog.confirm({
                        message: '确认要删除这些商品吗？',
                    })
                    .then(() => {
                        //确定删除

                        let arrCart = []
                            //通过测试，得到单选删除的时候传递id的字符类型为number
                        if (typeof id == 'number') {
                            //单个删除
                            arrCart = [id]
                                //遍历数组并寻找商品对应购物车中的id
                            let index = state.list.findIndex(v => {
                                return v.id = id
                            })
                            state.list.splice(index, 1)

                        } else {
                            //多选删除
                            arrCart = state.selectList
                            commit('delGoods')
                                //反选（清空selectCart）
                            commit('unCheckAll')
                        }
                        http.$axios({
                            url: '/api/deleteCart',
                            method: 'POST',
                            data: {
                                cartId: arrCart
                            }
                        }).then(res => {
                            if (res.success) {
                                Toast(res.msg)
                            } else {
                                Toast('操作失败，请刷新页面')
                            }



                        })
                    })
                    .catch(() => {
                        // 取消
                    });
            }
        }
    }
}